<template>
    <!-- 
    <b-modal ref="my-modal" hide-footer title="Using Component Methods">
     <div class="d-block text-center">
       <h3>Hello From My Modal!</h3>
     </div>
     <b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>
     <b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>
   </b-modal> 
    -->
    <!--
        body-class="modalStyle" 表示样式
        size="lg" 表示模态窗口大小 xl,lg,sm,full
        hide-footer 表示隐藏底部按钮
        hide-header 表示隐藏头部内容
        no-close-on-backdrop 表示鼠标点击背景不可关闭
        hide-header-close 表示隐藏头部关闭按钮
        centered 居中
        ok-title=“确定” 
        cancel-title=取消
        @ok="handleOk" 
        @cancel="handleCancel"
        scrollable 滚动条
        hide-backdrop 隐藏背景
        wrapClassName="ant-modal-cust-warp" 
        style="top:5%;height: 85%;overflow-y: hidden" 样式
    -->
    <b-modal ref="my-modal" size="lg" title="设备详情" hide-footer scrollable no-close-on-backdrop>
        <div class="d-block text-center">
            <!--begin::div-->
            <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                <div class="m-portlet__body">
                    <div class="form-group m-form__group row">
                        <label class="col-md-2 col-form-label">设备编号</label>
                        <div class="col-md-3">
                            <input class="form-control" type="text" disabled maxlength="32" v-model="deviceForm.device_code" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-md-2 col-form-label">设备名称</label>
                        <div class="col-md-3">
                            <input class="form-control" type="text" disabled maxlength="255" v-model="deviceForm.name" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-md-2 col-form-label">简&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;写</label>
                        <div class="col-md-3">
                            <input class="form-control" type="text" disabled maxlength="32" v-model="deviceForm.short_name" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-md-2 col-form-label">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</label>
                        <div class="col-md-6">
                            <textarea class="form-control" type="text" disabled maxlength="255" v-model="deviceForm.remarks" placeholder="请输入"></textarea>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-md-2 col-form-label">桩&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                        <div class="col-md-3">
                            <input class="form-control" type="text" disabled maxlength="64" v-model="deviceForm.build_pos" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-md-2 col-form-label">桩号描述</label>
                        <div class="col-md-3">
                            <input class="form-control" type="text" disabled maxlength="255" v-model="deviceForm.build_pos_content" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-md-2 col-form-label">设备类型</label>
                        <div class="col-md-3">
                            <el-select v-model="deviceForm.device_type_id" disabled placeholder="请选择">
                                <el-option
                                v-for="item in deviceTypeList"
                                :key="item.device_type_id"
                                :label="item.device_type_name"
                                :value="item.device_type_id">
                                </el-option>
                            </el-select>    
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-md-2 col-form-label">生&nbsp;&nbsp;产&nbsp;商</label>
                        <div class="col-md-3">
                            <el-select v-model="deviceForm.oem_id" disabled placeholder="请选择">
                                <el-option
                                v-for="item in oemList"
                                :key="item.oem_id"
                                :label="item.oem_name"
                                :value="item.oem_id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-md-2 col-form-label">型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                        <div class="col-md-3">
                            <el-select v-model="deviceForm.model_id" disabled placeholder="请选择">
                                <el-option
                                v-for="item in modelList"
                                :key="item.model_id"
                                :label="item.model_name"
                                :value="item.model_id">
                                </el-option>
                            </el-select>      
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-md-2 col-form-label">生产日期</label>
                        <div class="col-md-2">
                            <el-date-picker
                                v-model="deviceForm.produce_date"
                                align="left"
                                disabled
                                style="width:150px"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-md-2 col-form-label">报废时间</label>
                        <div class="col-md-2">
                            <el-date-picker
                                v-model="deviceForm.scrap_time"
                                align="left"
                                disabled
                                style="width:150px"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-md-2 col-form-label">位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置</label>
                        <div class="col-md-4">
                            <el-select v-model="deviceForm.device_location_id" disabled placeholder="请选择">
                                <el-option v-for="item in locationList" :key="item.device_location_id" :label="item.location_name"
                                :value="item.device_location_id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <template slot="modal-footer">
            <!--自定义按钮-->
        </template>
    </b-modal>        
</template>
<script>
import apiUtil from "@/core/util/apiUtil.js"; 
import { handleNotify,handleAlert,handleConfirm,showWating,closeWating} from "@/core/util/jehcUtil.js";
export default {
    data(){
        return {    
            oemList:[],
            modelList:[],
            deviceTypeList:[],
            locationList:[],
            deviceForm:{
                device_id:"",
                device_code: "",
                name:"",
                short_name:"",
                remarks:"",
                build_pos:"",
                build_pos_content:"",
                device_type_id:"",
                oem_id:"",
                model_id:"",
                model_id_:"",
                produce_date:"",
                scrap_time:"",
                device_location_id:"",
                
            },
            pickerOptions: {
                // disabledDate(time) {//范围不可选
                //     return time.getTime() > Date.now();
                // },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, 
                {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, 
                {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            }
        }
    },
    components: {
        
    },
    watch: {    
        "deviceForm.oem_id":{//监听字段变化
            handler:function(newVal,old){
                this.deviceForm.model_id = "";
                if(newVal == "" || newVal == undefined || newVal == null){
                    this.deviceTypeList=[];
                }else{
                    this.initModelList(newVal)
                }
                if(this.deviceForm.model_id_ == "" || this.deviceForm.model_id_ == undefined || this.deviceForm.model_id_ == null){
                    
                }else{
                    this.deviceForm.model_id = this.deviceForm.model_id_;
                    this.deviceForm.model_id_ = "";
                }
            }
        },
    },
    mounted() {
        
    },
    methods: {
        showModal(id) {
            this.restForm();
            this.$refs['my-modal'].show();
            this.initOEMList();
            this.initModelList();
            this.initDeviceTypeList();
            this.initDeviceLocationList();
            this.getDetail(id)
        },
        hideModal() {
            this.$refs['my-modal'].hide()
        },
        toggleModal() {
            // 当模态已隐藏时，我们传递要返回焦点的按钮的ID
            this.$refs['my-modal'].toggle('#toggle-btn')
        },
        restForm(){
            //重置
            Object.assign(this.$data.deviceForm, this.$options.data().deviceForm);
        },        
        initOEMList(){
            let params = {};
            apiUtil.query(process.env.VUE_APP_MONITOR_API+"/iotOem/allList", params).then(({ data }) => {
                this.oemList = data.data;
            });
        },
        initModelList(oem_id){
            let params = {};
            apiUtil.query(process.env.VUE_APP_MONITOR_API+"/iotModel/list/"+oem_id, params).then(({ data }) => {
                this.modelList = data.data;
            });
        },
        initDeviceTypeList(){
            let params = {};
            apiUtil.query(process.env.VUE_APP_MONITOR_API+"/iotDeviceType/allList", params).then(({ data }) => {
                this.deviceTypeList = data.data;
            });            
        },
        initDeviceLocationList(){
            let params = {};
            apiUtil.query(process.env.VUE_APP_MONITOR_API+"/iotDeviceLocation/allList", params).then(({ data }) => {
                this.locationList = data.data;
            }); 
        },
        getDetail(id){
            apiUtil.get(process.env.VUE_APP_MONITOR_API+"/iotDevice/get/"+id).then(({ data }) => {
                this.deviceForm = data.data;                
                this.initModelList(this.deviceForm.oem_id);
                this.deviceForm.model_id_ = data.data.model_id;
            });
        }
   },
}
</script>